<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>K的工具箱</title>
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
</head>

<body>
    <div class="container py-5">
        <h1 class="text-primary text-center mb-5">K的工具箱</h1>
        <div class="row row-cols-md-3 g-4" id="tool-buttons">
        </div>
    </div>

    <footer class="bg-light py-3">
        <div class="container">
            <p class="text-muted mb-0 text-center">Copyright © 2023 奎歪歪 献给踌躇的自己</p>
        </div>
    </footer>

    <!-- 引入 Bootstrap 的 JS 文件和依赖文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.10.2/umd/popper.min.js"></script>
    <script src="bootstrap/bootstrap.min.js"></script>
    <script src="js/password.js"></script>

    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            const toolButtons = [
                {
                    title: "文本工具",
                    tools: [
                        { name: "字符计数器", url: "./tool/CharacterCount/index.html" },
                        { name: "文本比较器", url: "./tool/TextComparison/index.html" },
                        { name: "写字板", url: "./tool/Tablet/index.html" }
                    ]
                },
                {
                    title: "图片工具",
                    tools: [
                        { name: "图片转Base64", url: "./tool/ImgBase64/index.html" },
                        { name: "图片Exif信息查看", url: "./tool/ImgExif/index.html" },
                        { name: "图片压缩器", url: "./tool/ImgCompress/index.html" }
                    ]
                },
                {
                    title: "计算工具",
                    tools: [
                        { name: "BMI计算", url: "./tool/BMI/index.html" },
                        { name: "日期计算", url: "./tool/DateCalculation/index.html" },
                        { name: "综合计算", url: "./tool/ComprehensiveCalculation/index.html" }
                    ]
                },
                {
                    title: "转换工具",
                    tools: [
                        { name: "进制转换", url: "./tool/DecimalConversion/index.html" },
                        { name: "色值转换", url: "./tool/ColorConversion/index.html" },
                        { name: "Unix时间戳转换", url: "./tool/UnixTime/index.html" }
                    ]
                },
                {
                    title: "开发工具",
                    tools: [
                        { name: "浏览器信息检测", url: "./tool/DeviceDetection/index.html" },
                        { name: "正则表达式测试", url: "./tool/RegularExpression/index.html" },
                        { name: "色彩随机生成", url: "./tool/ColorGenerate/index.html" }
                    ]
                },
                {
                    title: "随机工具",
                    tools: [
                        { name: "随机数生成", url: "./tool/RandomNumber/index.html" },
                        { name: "随机字符串生成", url: "./tool/RandomString/index.html" },
                        { name: "随机选择", url: "./tool/RandomSelection/index.html" }
                    ]
                },
                {
                    title: "加密工具",
                    tools: [
                        { name: "MD5加密", url: "./tool/MD5/index.html" },
                        { name: "PBKDF2加密", url: "./tool/PBKDF2/index.html" },
                        { name: "AES/DES加解密", url: "./tool/AES/index.html" }
                    ]
                },
                {
                    title: "其它工具",
                    tools: [
                        { name: "页面性能测试", url: "./tool/PerformanceTest/index.html" }
                    ]
                }
            ];

            const $toolButtonsContainer = $("#tool-buttons");

            toolButtons.forEach(function (toolGroup) {
                const $toolGroupCard =
                    $("<div>")
                        .addClass("col-md")
                        .append(
                            $("<div>")
                                .addClass("card h-100")
                                .append(
                                    $("<div>")
                                        .addClass("card-body")
                                        .append(
                                            $("<h2>")
                                                .addClass("card-title text-center mb-4")
                                                .text(toolGroup.title),
                                            $("<ul>").addClass("list-unstyled")
                                        )
                                )
                        );

                toolGroup.tools.forEach(function (tool) {
                    const $toolButton = $("<a>")
                        .addClass("btn btn-outline-primary w-100 my-3")
                        .attr("href", tool.url)
                        .attr("target", "_blank")
                        .text(tool.name);

                    $toolGroupCard.find("ul").append($("<li>").append($toolButton));
                });

                $toolButtonsContainer.append($toolGroupCard);
            });
        });
    </script>
</body>

<style>
    /* 鼠标悬停时，将按钮文本颜色和背景颜色反转 */
    .btn:hover {
        background-color: #007bff;
        color: #fff;
    }

    /* 将卡片标题居中对齐 */
    .card-title {
        text-align: center;
    }

    /* 在小屏幕上将标题字体缩小 */
    @media (max-width: 767px) {
        .card-title {
            font-size: 1.5rem;
        }
    }

    /* 在小屏幕上将按钮的外边距调整为更紧密 */
    @media (max-width: 575px) {
        .btn {
            margin-bottom: 0.5rem;
        }
    }
</style>

</html>